<template>
	<div class="text-12px text-#ffffff min-h-240px">
		<div class="flex items-center justify-between">
			<p>筛选</p>
			<el-icon color="#ffffff" size="16px" @click="close">
				<CloseBold />
			</el-icon>
		</div>
		<div class="mt-20px text-#B5B5B5">
			<p>合约</p>
			<div class="w-full mt-10px">
				<SelectBoxL :list="contractList" title="合约"/>
			</div>
		</div>
		<div class="mt-10px text-#B5B5B5 flex items-center justify-between">
			<div class="w-48%">
				<p>类型</p>
				<div class="w-full mt-10px">
					<SelectBoxL :list="methodsList" title="类型"/>
				</div>
			</div>
			<div class="w-48%">
				<p>方向</p>
				<div class="w-full mt-10px">
					<SelectBoxL :list="toList" />
				</div>
			</div>
		</div>
		<div class="mt-10px text-#B5B5B5">
			<p>状态</p>
			<div>
				<el-checkbox v-model="checked1" >已取消</el-checkbox>
			</div>
			<div>
				<el-checkbox v-model="checked2">完全成交 </el-checkbox>
			</div>
			
		</div>
	</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import SelectBoxL from '../components/SelectBoxL.vue';

const emits = defineEmits(['close'])

const close = () => {
	emits('close',false)
}
const contractList = ref<any[]>([
	{
		value: '全部',
		label: '全部'
	},
	{
		value: 'BTC/USDT',
		label: 'BTC/USDT'
	},
	{
		value: 'ETH/USDT',
		label: 'ETH/USDT'
	},
	{
		value: 'TRX/USDT',
		label: 'TRX/USDT'
	}
])
const methodsList = ref<any[]>([
	{value:'全部',label:'全部'},
	{value:'市价',label:'市价'},
	{value:'限价',label:'限价'},
	{value:'市价止盈',label:'市价止盈'},
	{value:'市价止损',label:'市价止损'},
	{value:'限价止盈',label:'限价止盈'},
	{value:'限价止损',label:'限价止损'},
	{value:'强平',label:'强平'},
])

const toList = ref<any[]>([
	{value:'全部',label:'全部'},
	{value:'开多',label:'开多'},
	{value:'开空',label:'开空'},
	{value:'平多',label:'平多'},
	{value:'平空',label:'平空'},
])
const checked1 = ref<boolean>(false);
const checked2 = ref<boolean>(false);
</script>
<style lang="scss" scoped>
::v-deep .el-checkbox {
	--el-checkbox-checked-icon-color:#000;
	--el-checkbox-checked-bg-color:#fff;
	--el-checkbox-checked-input-border-color:#fff;
	--el-checkbox-checked-text-color:#fff;
	--el-checkbox-text-color:#fff;
}
</style>
